const canvas = document.getElementById('canvas1');
canvas.width = 552;
canvas.height = 150;

const ctx = canvas.getContext('2d');

class InputHandler {
    constructor() {
        this.keys = [];
        this.includesKeys = [
            'ArrowUp', 'ArrowDown', ' '
        ]
        window.addEventListener('keydown', (e) => {
            const key = e.key;
            console.log(key)
            if (this.includesKeys.includes(key) && !this.keys.includes(key)) {
                this.keys.push(key)
            }
        });
        window.addEventListener('keyup', (e) => {
            const key = e.key;
            if (this.includesKeys.includes(key) && this.keys.includes(key)) {
                this.keys.splice(this.keys.indexOf(key), 1)
            }
        })

    }
}

class Player {
    constructor(gameWidth,gameHeight) {
        this.gameWidth = gameWidth;
        this.gameHeight = gameHeight;
        this.width =88/2;
        this.height =94/2;
        this.floor = this.gameHeight -  this.height;
        this.x = 0;
        this.y = this.floor;
        this.weight = 3;

        this.image = document.getElementById('game2');
    }
    update(input){
        if(input.keys.includes('ArrowUp')){
            this.y-= 5;
        }else{
            this.y+=this.weight; 
        }
        if(input.keys.includes('ArrowDown')){

        }
        if(this.y>this.floor){
            this.y=this.floor;
        }
        if(this.y<=0){
            this.y = 0;
        }
    }
    draw(ctx){
        ctx.drawImage(this.image,1678,0,88,94,this.x,this.y,this.width,this.height)
    }
}

class Background {

}


const input = new InputHandler();
const player = new Player(canvas.width,canvas.height);
player.draw(ctx);

const animate = ()=>{
    ctx.clearRect(0,0,canvas.width,canvas.height);
    player.update(input)
    player.draw(ctx);
    requestAnimationFrame(animate)
}

animate();




